<template>
	<a-collapse :bordered="false">
		<template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
		</template>
		<a-collapse-panel key="1" :header="i18n('funnelConfig','漏斗属性')">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="i18n('top','离容器上侧的距离')">
						<a-input type="number" v-model:value="config.styles.seriesFunnel.top" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.seriesFunnel.topSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('right','离容器右侧的距离')">
						<a-input type="number" v-model:value="config.styles.seriesFunnel.right" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.seriesFunnel.rightSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="i18n('bottom','离容器下侧的距离')">
						<a-input type="number" v-model:value="config.styles.seriesFunnel.bottom" >
                            <template #addonAfter>
                                <a-select  v-model:value="config.styles.seriesFunnel.bottomSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('left','离容器左侧的距离')">
						<a-input type="number" v-model:value="config.styles.seriesFunnel.left" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.seriesFunnel.leftSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="i18n('minSize','最小值映射宽度')">
						<a-input type="number" v-model:value="config.styles.funnelConfig.minSize" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.funnelConfig.minSizeSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('maxSize','最大值映射宽度')">
						<a-input type="number" v-model:value="config.styles.funnelConfig.maxSize" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.funnelConfig.maxSizeSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
		<a-collapse-panel key="2"  :header="chartI18n('common.labelSetting','标签设置')">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
						<a-input placeholder="输入内容" type="number" v-model:value="config.styles.funnelConfig.fontSize"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.fontSize','字体颜色')">
						<a-input v-model:value="config.styles.funnelConfig.fontColor"  type="color"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.position','位置')">
						<a-select v-model:value="config.styles.funnelConfig.position">
							<a-select-option value="outside">{{chartI18n('common.outside','外部')}}</a-select-option>
							<a-select-option value="inside">{{chartI18n('common.inside','内部')}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showPercentage','展示百分比')">
						<a-switch  size="small" v-model:checked="config.styles.funnelConfig.showPercentage"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showName','展示名称')">
						<a-switch  size="small" v-model:checked="config.styles.funnelConfig.showName"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showValue','展示数值')">
						<a-switch  size="small" v-model:checked="config.styles.funnelConfig.showValue"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
	</a-collapse>
</template>

<script>
export default {
	name: "funnel-config",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data(){
		return{
			funnelConfig:{
				fontSize:12,
				fontColor:"#FFFFFF",
				position:"inside",
				showName:true,
				showValue:false,
				showPercentage:true,
				minSize:0,
				minSizeSuffix:'%',
				maxSize:100,
				maxSizeSuffix:'%'
			},
			seriesFunnel:{
				top:50,
				topSuffix:"px",
				bottom:30,
				bottomSuffix:"px",
				right:30,
				rightSuffix:"px",
				left:50,
				leftSuffix:"px",
			}
		}
	},
	created() {
		if(!this.config.styles.funnelConfig){
            this.config.styles["funnelConfig"]=this.funnelConfig;
		}
		if(!this.config.styles.seriesFunnel){
            this.config.styles["seriesFunnel"]=this.seriesFunnel;
		}
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"funnelChartLang",key);
		},
		chartI18n(name,text,key){
			return this.$ti18(name,text,"chartLang",key);
		},
	}
}
</script>

<style scoped>
</style>
